<template>
	<view class="u-p-l-80 u-p-r-80">
		<!-- 标题 -->
		<view class="font-bold u-f-78">{{ lang_first.second_title }}</view>
		
		<!-- 表单 -->
		<view class="u-m-t-96 u-p-b-14">
			<view
			v-for="(item, index) in sexs"
			:key="index"
			class="font-bold u-p-t-40 flex-center-center"
			@click="value = item.value"
			>
				<x-common-btn
				width="590"
				heiht="96"
				:color="value === item.value ? '#FC1F40' : '#CACACA'"
				:borderColor="value === item.value ? '#FC1F40' : '#CACACA'"
				background="rgba(0,0,0,0)"
				>{{ lang_common[item.key] }}</x-common-btn>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view
		class="flex-center-center"
		style="margin-top: 136rpx">
			<x-common-btn
			width="590"
			height="102"
			@click="nextAction"
			>{{ lang_common.continue }}</x-common-btn>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			parentObj: {
				default: () => ({})
			}
		},
		data() {
			return {
				// 默认是男
				value: 1,
				
				// 性别列表
				sexs: [
					{ key: 'male', value: 1 },
					{ key: 'famale', value: 2 }
				]
			}
		},
		watch: {
			parentObj: {
				handler(v) {
					this.value = v && v.sex || 1
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			nextAction() {
				this.$emit('change', { sex: this.value })
			}
		}
	}
</script>

<style scoped lang="scss">
	.sex-btn {
		
	}
</style>
